<template>
  <Dialog v-model="visible" title="购买会员" width="64%">
    <el-row :gutter="3">
      <el-col :span="8" v-for="(item, i) in goods" :key="i">
        <el-card style="margin: 15px" :shadow="i === radioGoods.radio ? 'always' : 'never'">
          <template #header>
            <div class="card-header">
              <center>
                <span style="size: red">{{ item.goodsName }}</span>
              </center>
            </div>
          </template>
          <center>${{ item.price }}</center>
        </el-card>
      </el-col>
    </el-row>
    <template #footer>
      <el-button type="primary">支 付</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" name="PayOrderDetail" setup>
const visible = ref(false) // 弹窗的是否展示
const loading = ref(false) // 表单的加载中
const form = ref({
  id: ''
})

const radioGoods = ref<{
  radio: 0
}>

const goods = ref([
  { goodsName: '年卡会员', price: 500 },
  { goodsName: '季卡会员', price: 200 },
  { goodsName: '季卡会员', price: 200 },
  { goodsName: '季卡会员', price: 200 },
  { goodsName: '季卡会员', price: 200 },
  { goodsName: '季卡会员', price: 200 },
  { goodsName: '季卡会员', price: 200 }
])

/** 打开弹窗 */
const open = async (id = '') => {
  visible.value = true
  // 修改时,设置数据
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
</script>
<style></style>
